<template>
  <page-meta :page-style="$theme.pageStyle">
    <!-- #ifndef H5 -->
    <navigation-bar :front-color="$theme.navColor" :background-color="$theme.navBgColor" />
    <!-- #endif -->
  </page-meta>

  <page-bg></page-bg>
  <u-navbar
      :safeAreaInsetTop="false"
      :placeholder="false"
      :is-back="false"
      :is-fixed="true"
      title="会员中心"
      :border-bottom="false"
      :title-bold="true"
      :title-color="'#111111'"
      :background="{ background : navBg }"
  >
  </u-navbar>

  <view class="user flex-1">
    <view class="flex flex-row justify-between px-[30rpx] py-[30rpx]" v-if="theUserInfo">
      <view class="flex flex-row items-center" @click="navTo('/packages/pages/user/setting')">
        <view class="bg-white rounded-[50%] px-[5rpx] py-[5rpx]">
          <u-image shape="circle"
            :src="theUserInfo.avatar"
            width="130rpx" height="130rpx"></u-image>
        </view>
        <view class="ml-[20rpx]">
          <view class="flex flex-row items-center">
            <view class="font-bold">{{ theUserInfo.nickname }}</view>
            <view :style="{border:`solid 1px ${$theme.primaryColor}`}"
              class="flex flex-row items-center rounded-[40px] px-[10rpx] ml-[10rpx]">
              <u-image :src="`${$domain}/static/icons/user/wrz.svg`" width="30rpx" height="30rpx"></u-image>
              <view style="font-size: 18rpx" :style="{color:`${$theme.primaryColor}`}">未认证，立即认证</view>
            </view>
          </view>
          <view class="text-xs font-bold">ID：{{ theUserInfo.sn }}</view>
          <view class="flex flex-row items-center text-content" style="font-size: 22rpx;">
            {{ theUserInfo.age ? theUserInfo.age + '岁 | ' : '' }} {{ theUserInfo.height ? theUserInfo.height + 'cm | ' : '' }} {{ theUserInfo.education || ''  }}
<!--            <view v-if="theUserInfo.age">{{ theUserInfo.age }}岁</view>-->
<!--            <view class="border-l-2 border-light border-solid border-0 ml-[10rpx] pl-[10rpx]" v-if="theUserInfo.height">{{ theUserInfo.height }}cm</view>-->
<!--            <view class="border-l-2 border-light border-solid border-0 ml-[10rpx] pl-[10rpx]">{{ theUserInfo.education }}</view>-->
          </view>
        </view>
      </view>
      <view class="flex flex-row items-center self-start mt-[30rpx]">
        <u-image :src="`${$domain}/static/icons/user/lxkf.svg`" width="40rpx" height="40rpx" mode="widthFix"></u-image>
        <u-image @click="navTo('/packages/pages/user/setting')" class="ml-[20rpx]" :src="`${$domain}/static/icons/user/shezhi.svg`" width="40rpx" height="40rpx"
          mode="widthFix"></u-image>
      </view>
    </view>
    <view class="flex flex-row justify-between px-[30rpx] py-[30rpx]" v-else @click="navTo('/pages/login/login')">
      <view class="flex flex-row items-center">
        <view class="bg-white rounded-[50%] px-[5rpx] py-[5rpx]">
          <u-image shape="circle" src="/static/images/user/default_avatar.png" width="100rpx" height="100rpx"></u-image>
        </view>
        <view class="ml-[20rpx]">
          <view class="flex flex-row items-center">
            <view class="font-bold text-2xl text-content">点击登录</view>
          </view>
        </view>
      </view>
    </view>
    <view class="flex flex-row justify-between mx-[30rpx] px-[50rpx] py-[30rpx]">
      <view class="flex flex-col items-center">
        <view class="font-bold text-2xl">{{ theUserInfo.qianxian_count }}</view>
        <view class="text-content text-xs mt-[15rpx]">我的牵线</view>
      </view>
      <view class="flex flex-col items-center" @click="navTo('/packages/pages/user/my-collection')">
        <view class="font-bold text-2xl">{{ theUserInfo.collection_count }}</view>
        <view class="text-content text-xs mt-[15rpx]">我的收藏</view>
      </view>
      <view class="flex flex-col items-center">
        <view class="font-bold text-2xl">{{ theUserInfo.my_foot_count }}</view>
        <view class="text-content text-xs mt-[15rpx]">我看过谁</view>
      </view>
      <view class="flex flex-col items-center">
        <view class="font-bold text-2xl">{{ theUserInfo.foot_my_count }}</view>
        <view class="text-content text-xs mt-[15rpx]">谁看过我</view>
      </view>
    </view>
    <view class="vip bg-white rounded-[30rpx] mx-[30rpx] px-[50rpx] py-[30rpx] flex flex-row justify-between">
      <view>
        <view class="text-white font-bold text-2xl">{{ theUserInfo.is_vip == 0 ? 'VIP会员未开通' : '尊贵' + theUserInfo.vip_title + '会员' }}</view>
        <view class="text-white text-xs">{{ theUserInfo.is_vip == 0 ? '开通VIP会员可享受尊贵服务哦' : '升级会员享受更多服务' }}</view>
      </view>
      <view>
        <u-button type="primary" shape="circle" @click="navTo('/packages/pages/user/vip')">{{ theUserInfo.is_vip == 0 ? '立即开通' : '立即升级' }}</u-button>
      </view>
      <image class="vip-img" :src="`${$domain}/static/icons/user/hg.svg`"></image>
    </view>
    <view class="bg-white flex flex-row justify-between mx-[30rpx] px-[30rpx] py-[50rpx] rounded-[40rpx] mt-[40rpx]">
      <view class="flex flex-col items-center">
        <u-image width="100rpx" height="100rpx" :src="`${$domain}/static/icons/user/hnqx.svg`" mode="heightFix"></u-image>
        <view>红娘牵线</view>
      </view>
      <view class="flex flex-col items-center">
        <u-image width="100rpx" height="100rpx" :src="`${$domain}/static/icons/user/srdz.svg`" mode="heightFix"></u-image>
        <view>私人定制</view>
      </view>
      <view class="flex flex-col items-center">
        <u-image width="100rpx" height="100rpx" :src="`${$domain}/static/icons/user/wyzd.svg`" mode="heightFix"></u-image>
        <view>我要置顶</view>
      </view>
      <view class="flex flex-col items-center" @click="navTo('/packagesA/pages/dynamicAdd/dynamicAdd')">
        <u-image width="100rpx" height="100rpx" :src="`${$domain}/static/icons/user/fbdt.svg`" mode="heightFix"></u-image>
        <view>发布动态</view>
      </view>
    </view>
    <view class="bg-white flex flex-col mx-[30rpx] px-[50rpx] py-[30rpx] rounded-[40rpx] mt-[40rpx]">
      <view @click="navTo('/packages/pages/user/my-account')"
        class="flex flex-row justify-between items-center py-[40rpx]" style="border-bottom: solid 1px #eeeeee;">
        <view class="flex flex-row items-center">
          <u-image width="35rpx" height="35rpx" :src="`${$domain}/static/icons/user/wdzh.svg`"></u-image>
          <view class="font-bold ml-[20rpx]">我的账户</view>
        </view>
        <view><u-icon name="arrow-right"></u-icon></view>
      </view>
      <view class="flex flex-row justify-between items-center py-[40rpx]" style="border-bottom: solid 1px #eeeeee;">
        <view class="flex flex-row items-center">
          <u-image width="35rpx" height="35rpx" :src="`${$domain}/static/icons/user/zshn.svg`"></u-image>
          <view class="font-bold ml-[20rpx]">专属红娘</view>
        </view>
        <view><u-icon name="arrow-right"></u-icon></view>
      </view>
      <view @click="navTo('/packages/pages/user/integrity-certification')"
        class="flex flex-row justify-between items-center py-[40rpx]" style="border-bottom: solid 1px #eeeeee;">
        <view class="flex flex-row items-center">
          <u-image width="35rpx" height="35rpx" :src="`${$domain}/static/icons/user/cxrz.svg`"></u-image>
          <view class="font-bold ml-[20rpx]">诚信认证</view>
        </view>
        <view><u-icon name="arrow-right"></u-icon></view>
      </view>
      <view @click="navTo('/packagesA/pages/album/album')" class="flex flex-row justify-between items-center py-[40rpx]" style="border-bottom: solid 1px #eeeeee;">
        <view class="flex flex-row items-center">
          <u-image width="35rpx" height="35rpx" :src="`${$domain}/static/icons/user/zpsp.svg`"></u-image>
          <view class="font-bold ml-[20rpx]">相册中心</view>
        </view>
        <view><u-icon name="arrow-right"></u-icon></view>
      </view>
      <view @click="navTo('/packages/pages/user/my-write-off')" class="flex flex-row justify-between items-center py-[40rpx]" style="border-bottom: solid 1px #eeeeee;">
        <view class="flex flex-row items-center">
          <u-image width="35rpx" height="35rpx" :src="`${$domain}/static/icons/user/wyhx.svg`"></u-image>
          <view class="font-bold ml-[20rpx]">我要核销</view>
        </view>
        <view><u-icon name="arrow-right"></u-icon></view>
      </view>
      <view @click="navTo('/packages/pages/user/my-registration')" class="flex flex-row justify-between items-center py-[40rpx]" style="border-bottom: solid 1px #eeeeee;">
        <view class="flex flex-row items-center">
          <u-image width="35rpx" height="35rpx" :src="`${$domain}/static/icons/user/wdhdbm.svg`"></u-image>
          <view class="font-bold ml-[20rpx]">我的活动报名</view>
        </view>
        <view><u-icon name="arrow-right"></u-icon></view>
      </view>
      <view class="flex flex-row justify-between items-center py-[40rpx]" @click="navTo('/packagesA/pages/myDynamic/myDynamic')">
        <view class="flex flex-row items-center">
          <u-image width="35rpx" height="35rpx" :src="`${$domain}/static/icons/user/wddt.svg`"></u-image>
          <view class="font-bold ml-[20rpx]">我的动态</view>
        </view>
        <view><u-icon name="arrow-right"></u-icon></view>
      </view>
    </view>
    <view v-if="false" v-for="(item, index) in state.pages" :key="index">
      <template v-if="item.name == 'user-info'">
        <w-user-info :pageMeta="state.meta" :content="item.content" :styles="item.styles" :user="userInfo"
          :is-login="isLogin" />
      </template>
      <template v-if="item.name == 'my-service' && false">
        <w-my-service :content="item.content" :styles="item.styles" />
      </template>
      <template v-if="item.name == 'user-banner' && false">
        <w-user-banner :content="item.content" :styles="item.styles" />
      </template>
    </view>
  </view>
  <tabbar />

</template>

<script setup lang="ts">
  import { getDecorate } from '@/api/shop'
  import { useUserStore } from '@/stores/user'
  import {onPageScroll, onShow} from '@dcloudio/uni-app'
  import { storeToRefs } from 'pinia'
  import {reactive, ref} from 'vue'
  import PageBg from "@/components/page-bg/page-bg.vue";
  import {getUserInfoApi} from "@/api/new";

  const navBg = ref<string>('rgba(255,255,255,0)')
  const titleColor = ref<string>('#fff')

  onPageScroll((event: any) => {
    navBg.value = event.scrollTop > 10 ? '#fff' : 'rgba(255,255,255,0)'
    titleColor.value = event.scrollTop > 10 ? '#111' : '#fff'
  })

  const theUserInfo = ref()

  const getTheUserInfo = async () => {
    theUserInfo.value = await getUserInfoApi({})
  }




  const state = reactive < {
    meta: any[]
    pages: any[]
  } > ({
    meta: [],
    pages: []
  })
  const getData = async () => {
    const data = await getDecorate({ id: 2 })
    state.meta = JSON.parse(data.meta)
    state.pages = JSON.parse(data.data)
    uni.setNavigationBarTitle({
      title: state.meta[0].content.title
    })
  }
  const userStore = useUserStore()
  const { userInfo, isLogin } = storeToRefs(userStore)
  onShow(() => {
    userStore.getUser()
    getTheUserInfo()
  })
  getData()
  const navTo = (url) => {
    uni.navigateTo({ url })
  }
</script>

<style lang="scss" scoped>
  .vip {
    background: linear-gradient(90deg, #A163FE 0%, #B583FF 100%);
    box-shadow: 0px 6px 14px 0px rgba(119, 81, 231, 0.5);
    position: relative;
    overflow: hidden;

    .vip-img {
      position: absolute;
      top: -50rpx;
      left: -30rpx;
      width: 250rpx;
      height: 250rpx;
    }
  }
</style>